<html> 
<head> 
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> 
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true&amp;key=ABQIAAAAOZJQqoDBwAknMtPNKR-dvRSi2OoyjRwg8X5jAJmNj4togrBv2xSClpdvpd4FJNt4C5i-i6aTtWzs-g"></script> 
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script> 
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.min.js"></script> 
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>  
<style type="text/css"> 
body {
  font-size: 0.8em;
}
 
#map-container, #side-container, #side-container li {
  float: left;
}
 
#map-container {
  width: 800px;
  height: 600px;
}
 
#side-container {
  border: 1px solid #bbb;
  margin-right: 5px;
  padding: 2px 4px;
  text-align: right;
  width: 260px;
}
#side-container ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}
#side-container li input {
  font-size: 0.85em;
  width: 210px;
}
#side-container .dir-label {
  font-weight: bold;
  padding-right: 3px;
  text-align: right;
  width: 40px;
}
 
#dir-container {
  height: 525px;
  overflow: auto;
  padding: 2px 4px 2px 0;
}
#dir-container table {
  font-size: 1em;
  width: 100%;
}
</style> 
 
</head> 
<body> 
 
<div id="side-container"> 
  <ul> 
    <li class="dir-label">From:</li> 
    <li><input id="from-input" type=text value="24 Le Dinh Duong, Da Nang"/></li> 
    <br clear="both"/> 
    <li class="dir-label">To:</li> 
    <li><input id="to-input" type=text value="305 Au Co, Da Nang"/></li> 
	<br clear="both"/> 
  </ul> 
  <input onclick="FindDirection.getDirections();" type=button value="Go!"/> 
  <div id="dir-container"></div> 
</div> 
<div id="map-container"></div> 
 
<script type="text/javascript"> 
var FindDirection = {
  // HTML Nodes
  mapContainer: document.getElementById('map-container'),
  dirContainer: document.getElementById('dir-container'),
  fromInput: document.getElementById('from-input'),
  toInput: document.getElementById('to-input'),
 
  // API Objects
  dirService: new google.maps.DirectionsService(),
  dirRenderer: new google.maps.DirectionsRenderer(),
  map: null,
 
  showDirections: function(dirResult, dirStatus) {
    if (dirStatus != google.maps.DirectionsStatus.OK) {
      alert('Directions failed: ' + dirStatus);
      return;
    }
 
    // Show directions
    FindDirection.dirRenderer.setMap(FindDirection.map);
    FindDirection.dirRenderer.setPanel(FindDirection.dirContainer);
    FindDirection.dirRenderer.setDirections(dirResult);
  },
 
  getDirections: function() {
    var fromStr = FindDirection.fromInput.value;
    var toStr = FindDirection.toInput.value;
    var dirRequest = {
      origin: fromStr,
      destination: toStr,
      travelMode: google.maps.DirectionsTravelMode.DRIVING,
      unitSystem: google.maps.DirectionsUnitSystem.IMPERIAL,
      provideRouteAlternatives: true
    };
    FindDirection.dirService.route(dirRequest, FindDirection.showDirections);
  },
 
  init: function() {
    var latLng = new google.maps.LatLng(16, 108);
    FindDirection.map = new google.maps.Map(FindDirection.mapContainer, {
      zoom: 13,
      center: latLng,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });
 
    // Show directions onload
    FindDirection.getDirections();
  }
};
 
// Onload handler to fire off the app.
google.maps.event.addDomListener(window, 'load', FindDirection.init);
var geocoder = new google.maps.Geocoder();  
 
     $(function() {
         $("#from-input,#to-input").autocomplete({
         
           source: function(request, response) {
 
          if (geocoder == null){
           geocoder = new google.maps.Geocoder();
          }
             geocoder.geocode( {'address': request.term }, function(results, status) {
               if (status == google.maps.GeocoderStatus.OK) {
 
                  var searchLoc = results[0].geometry.location;
               var lat = results[0].geometry.location.lat();
                  var lng = results[0].geometry.location.lng();
                  var latlng = new google.maps.LatLng(lat, lng);
                  var bounds = results[0].geometry.bounds;
 
                  geocoder.geocode({'latLng': latlng}, function(results1, status1) {
                      if (status1 == google.maps.GeocoderStatus.OK) {
                        if (results1[1]) {
                         response($.map(results1, function(loc) {
                        return {
                            label  : loc.formatted_address,
                            value  : loc.formatted_address,
                            bounds   : loc.geometry.bounds
                          }
                        }));
                        }
                      }
                    });
            }
              });
           },
           select: function(event,ui){
      var pos = ui.item.position;
      var lct = ui.item.locType;
      var bounds = ui.item.bounds;
 
      if (bounds){
       FindDirection.map.fitBounds(bounds);
      }
           }
         });
     });   
</script> 
</body> 
</html> 